<template>
	<view class="mydetail-body">
		<view class="ava-view tn-padding-sm tn-flex-direction-row tn-flex-row-center tn-flex border-line-view" @touchend="changeAvatar">
			<tn-avatar class="avatar-clas" size="xl" shape="circle" :src="avatarUrl"></tn-avatar>
			<view class="right-xiugai-icon">
				<text>修改</text>
				<view class="tn-icon-right"></view>
			</view>
		</view>
		<tn-list-view title="个人信息" :card="true" unlined="all">
		  <block>
			<tn-list-cell :arrow="false">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						用户名
					</view>
					<view class="tn-padding-right">
						{{userInfo.account?userInfo.account:'account'}}
					</view>
				</view>
			</tn-list-cell>
		  </block>
		  <block>
			<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						姓名
					</view>
					<view class="tn-padding-right" @touchend="changeInfo('xingming')">
						{{userInfo.realName?userInfo.realName:'请设置姓名'}}
					</view>
				</view>
			</tn-list-cell>
		  </block>		 
		  <block  v-if="loginType == 1">
			<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						机构
					</view>
					<view class="tn-padding-right">
						{{userInfo.orgName?userInfo.orgName:'请设置机构'}}
					</view>
				</view>
			</tn-list-cell>
		  </block>
		  <block v-if="loginType == 1">
			<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						岗位
					</view>
					<view class="tn-padding-right">
						{{userInfo.postName?userInfo.postName:'请设置工作岗位'}}
					</view>
				</view>
			</tn-list-cell>
		  </block>	
		  <block v-if="loginType == 2">
			<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						关系
					</view>
					<view class="tn-padding-right" @touchend="changeInfo('guanxi')">
						{{relationShipStr?relationShipStr:'请设置幼儿关系'}}
					</view>
				</view>
			</tn-list-cell>
		  </block>
		  <block v-if="loginType == 2">
		  	<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						工作单位
					</view>
					<view class="tn-padding-right" @touchend="changeInfo('danwei')">
						{{userInfo.workplace?userInfo.workplace:'请设置工作单位'}}
					</view>
				</view>
		  	</tn-list-cell>
		  </block>
		  <block v-if="loginType == 2">
		  	<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						学历
					</view>
					<view class="tn-padding-right" @touchend="changeInfo('xueli')">
						{{userInfo.degree?degreeObj[userInfo.degree]:'请设置学历'}}
					</view>
				</view>
		  	</tn-list-cell>
		  </block>
		  <block v-if="loginType == 2">
		  	<tn-list-cell :arrow="false">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						考勤机卡号
					</view>
					<view class="tn-padding-right">
						{{userInfo.machineCardNumber?userInfo.machineCardNumber:'无'}}
					</view>
				</view>
		  	</tn-list-cell>
		  </block>
		</tn-list-view>
		<!-- <view class="height-100 tn-flex tn-flex-row-between tn-padding border-line-view">
			<view class="width-150 tn-text-right">
				性别
			</view>
			<view class="" @touchend="changeInfo('xingbie')">
				{{xingbieObj[userInfo.sex]}}
				<view class="tn-icon-right"></view>
			</view>
		</view> -->
		

		

		<tn-modal
		  v-model="showtnmodal"
		  :radius="10"
		  :maskCloseable="true"
		  :zoom="true"
		  :custom="true"
		  @click="clickBtn"
		>
		  <view>
			<view class="custom-modal-content">
				  <tn-form :labelWidth="120" class="tn-margin-bottom">
					<tn-form-item label="姓名" :borderBottom="false">
					  <tn-input placeholder="请输入姓名" v-model="name" border></tn-input>
					</tn-form-item>
				  </tn-form>
				<view class="tn-flex tn-flex-row-between">
					<tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="150rpx" backgroundColor="#A4E82F" fontColor="#ffffff">关闭</tn-button>
					<tn-button class="opo-bottom-btn" shape="round" @click="submitChange()" width="150rpx" backgroundColor="#01BEFF" fontColor="#ffffff">确认</tn-button>
				</view>
			</view>
		  </view>
		</tn-modal>
		
		<tn-modal
		  v-model="showdanweimod"
		  :radius="10"
		  :maskCloseable="true"
		  :zoom="true"
		  :custom="true"
		  @click="clickBtn"
		>
		  <view>
			<view class="custom-modal-content">
				  <tn-form :labelWidth="140" class="tn-margin-bottom">
					<tn-form-item label="工作单位" :borderBottom="false">
					  <tn-input placeholder="请输入工作单位" v-model="danweistr" border></tn-input>
					</tn-form-item>
				  </tn-form>
				<view class="tn-flex tn-flex-row-between">
					<tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="150rpx" backgroundColor="#A4E82F" fontColor="#ffffff">关闭</tn-button>
					<tn-button class="opo-bottom-btn" shape="round" @click="submitdanweiChange()" width="150rpx" backgroundColor="#01BEFF" fontColor="#ffffff">确认</tn-button>
				</view>
			</view>
		  </view>
		</tn-modal>
		<tn-select
		  v-model="showxingbieSelect"
		  mode="single"
		  title="请选择性别"
		  :list="xingbielist"
		  :maskCloseable="true"
		  @confirm="confirmSelect"
		  :defaultValue="defaultXingbie"
		>
		</tn-select>
		
		<tn-select
		  v-model="showguanxiSelect"
		  mode="single"
		  title="请选择家长关系"
		  :list="guanxilist"
		  :maskCloseable="true"
		  @confirm="confirmguanxiSelect"
		>
		</tn-select>
		
		<tn-select
		  v-model="showxueliSelect"
		  mode="single"
		  title="请选择学历"
		  :list="degreeList"
		  :maskCloseable="true"
		  @confirm="confirmSelectXueli"
		>
		</tn-select>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default {
		name: 'mydetail',
		data(){
			return {
				avatarUrl: 'https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2',
				loginType: 2,
				name: '',
				showtnmodal: false,
				changeType: '',
				showxingbieSelect: false,
				xingbielist: [
					{ value: 0, label: '未知' },
					{ value: 1, label: '男' },
					{ value: 2, label: '女' },
				],
				defaultXingbie: [],
				xingbieObj:{
					0: '未知',
					1: '男',
					2: '女'
				},
				showguanxiSelect: false,
				guanxilist: [
					{label: '父亲', value: 1},
					    {label: '母亲', value: 2},
					    {label: '爷爷', value: 3},
					    {label: '奶奶', value: 4},
					    {label: '外公', value: 5},
					    {label: '外婆', value: 6},
					    {label: '哥哥', value: 7},
					    {label: '姐姐', value: 8},
					    {label: '其他', value: 9},
				],
				userInfo: {},
				relationShipStr: '',
				imageTitle: '',
				showdanweimod: false,
				danweistr: '',
				degreeList: [
					{label: '未知', value: 0},
					{label: '小学', value: 1},
					{label: '初中', value: 2},
					{label: '高中', value: 3},
					{label: '大专', value: 4},
					{label: '本科', value: 5},
					{label: '研究生及以上', value: 6},
				],
				degreeObj: {
					0: '未知',
					1: '小学',
					2: '初中',
					3: '高中',
					4: '大专',
					5: '本科',
					6: '研究生及以上',
				},
				showxueliSelect: false,
			}
		},
		onShow() {
			this.loginType = uni.getStorageSync('loginType');
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.userInfo = uni.getStorageSync('userInfo');
			if(this.userInfo && this.userInfo.relationship > -1){
				this.getRelationShipStr(this.userInfo.relationship)
			}
			this.avatarUrl = this.imageTitle + this.userInfo.avatar;
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.userInfo = uni.getStorageSync('userInfo');
			if(this.userInfo && this.userInfo.relationship > -1){
				this.getRelationShipStr(this.userInfo.relationship)
			}
			this.getUserInfo()
			this.avatarUrl = this.imageTitle + this.userInfo.avatar;
			uni.$on('avatarfile', (data) => {
				console.log('监听-----------', data)
				this.updateAvatar(data);
			})
		},
		methods:{
			getUserInfo(){
				this.request({
					url: '/Parent/GetPersonalInfo',
					method: 'get',
					params: {
						UserId: this.userInfo.userId,
						UserType: this.loginType
					}
				}).then(res => {
					if(res.code == 200){
						// this.userInfo = res.data
						for (let resitem in res.data) {
							if(res.data[resitem]){
								if(resitem == 'degree'){
									this.$set(this.userInfo, 'degree',res.data[resitem])
								}else if(resitem == 'workplace'){
									this.$set(this.userInfo, 'workplace',res.data[resitem])
								}else {
									this.userInfo[resitem] = res.data[resitem]
								}
							}
						}
						console.log(this.userInfo)
						uni.setStorageSync('userInfo', this.userInfo)
					}else{
						this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
						})
					}
				})
			},
			updateAvatar(data){
				if(data.page == 'myDetail'){
					let postData = {
						imgId: data.imgId,
						parentId: this.userInfo.userId
					}		
					if(this.loginType == 1){
						postData = {
							avatar: data.imgId,
						}
					}
					this.editjiazhangUser(postData, 'avatar');
				}
			},
			getRelationShipStr(val){
				let guanxi = this.guanxilist.find(item => {return item.value === val});
				if(guanxi){
					this.relationShipStr = guanxi.label;
				}else{
					this.relationShipStr =  '';
				}
			},
			changeAvatar(){
				
					uni.navigateTo({
						url: '/pages/my/avatar?page=myDetail&avatarId='+this.userInfo.avatar,
						
					})
				// let that = this;
				// wx.chooseImage({
				// 	count: 1,
				//    success: chooseResult => {
				// 		console.log(chooseResult)
				// 		let file = chooseResult.tempFiles[0];
				// 		let filePath = chooseResult.tempFilePaths[0];
				// 		console.log(file)
				// 		that.uploadPhoto(file, filePath, async (resData) => {
				// 					if(resData.code == 200){
				// 							let postData = {
				// 								imgId: resData.data,
				// 								parentId: that.userInfo.userId
				// 							}
											
				// 							if(this.loginType == 1){
				// 								postData = {
				// 									avatar: resData.data,
				// 								}
				// 							}
				// 							let _url = this.imageTitle + resData.data
				// 							let cresult = await this.contentCheck.mediaCheck(2, _url, 2)
				// 							if(!cresult){
				// 								return
				// 							}
				// 							that.editjiazhangUser(postData, 'avatar');
				// 						that.avatarUrl = that.imageTitle + resData.data;
				// 					}
				// 		})
				// 	}
				// })
			},
			
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						
							  this.$refs.toast.show({
							    title: '',
							    content: '上传错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						console.log(err)
					}
				});
			},
			changeInfo(type){
				this.changeType = type;
				if(type == 'xingming'){
					this.showtnmodal = true;
					this.name = this.userInfo.realName;
				}else if(type == 'xingbie'){
					this.showxingbieSelect = true;
					
					let _item = this.xingbielist.findIndex(item => {return item.value == this.childInfo.gender})
					if(_item >= 0){
						this.defaultXingbie = [_item]
					}
				}else if(type == 'guanxi'){
					if(this.loginType == 1){
						return;
					}
					this.showguanxiSelect = true;
				}else if(type == 'danwei'){
					this.showdanweimod = true;
				}else if(type == 'xueli'){
					this.showxueliSelect = true;
				}
			},
			closedPopup(){
				this.showtnmodal = false;
				this.showdanweimod = false;
			},
			async submitChange(){
				if(!this.name){
					
						  this.$refs.toast.show({
						    title: '',
						    content: '请填写正确姓名',
						    icon: 'fail',
						    image: '',
						    duration: 1500
						  })
					return;
				}
				let cresult = await this.contentCheck.checkRequest(2, this.name)
				if(!cresult){
					return
				}
				this.showtnmodal = false;
				
				let postData = {
					name: this.name,
					parentId: this.userInfo.userId
				}
				if(this.loginType == 1){
					postData = {
						nickName: this.name,
					}
				}
				this.editjiazhangUser(postData, 'name');
			},
			submitdanweiChange(){
				let postData = {
					parentId: this.userInfo.userId,
					workplace: this.danweistr,
				}
				this.editjiazhangUser(postData, 'danwei');
				this.showdanweimod = false;
			},
			confirmSelect(val, label){
				this.showxingbieSelect = false;
				
				let postData = {
					genderType: val[0].value,
					parentId: this.userInfo.userId
				}
				if(this.loginType == 1){
					postData = {
						sex: val[0].value,
					}
				}
				this.editjiazhangUser(postData, 'gender');
			},
			confirmSelectXueli(val, label){
				this.showxingbieSelect = false;
				let postData = {
					degree: val[0].value,
					parentId: this.userInfo.userId
				}
				this.editjiazhangUser(postData, 'xueli');
				
			},
			confirmguanxiSelect(val){
				let postData = {
					relationship: val[0].value,
					childId: this.userInfo.childId,
					parentId: this.userInfo.userId
				}
				this.editjiazhangUser(postData, 'relationship');
			},
			editjiazhangUser(postData, changeType){
				let postUrl = this.loginType == 1? '/SysUser/UpdateInfoByApp':'/Parent/UpdatePersonalInfo'
				this.request({
					url: postUrl,
					method: 'post',
					params: postData
				}).then(res => {
					if(res.code == 200){
						if(changeType == 'avatar'){
							if(this.loginType == 1){
								this.userInfo.avatar = postData.avatar;
							}else{
								this.userInfo.avatar = postData.imgId;
							}
							this.avatarUrl = this.imageTitle + this.userInfo.avatar
						}else if(changeType == 'gender'){
							this.userInfo.sex = postData.genderType;
						}else if(changeType == 'relationship'){
							this.userInfo.relationship = postData.relationship;
							this.getRelationShipStr(this.userInfo.relationship)
						}else if(changeType == 'name'){
								if(this.loginType == 1){
									this.userInfo.userName = postData.nickName;
								}else{
									this.userInfo.userName = postData.name;
								}
						}else if(changeType == 'danwei'){
							this.userInfo.workplace = postData.workplace;
						}else if(changeType == 'xueli'){
							this.userInfo.degree = postData.degree;
						}
						this.$refs.toast.show({
								    title: '',
								    content: '保存成功',
								    icon: 'success',
								    image: '',
								    duration: 1000
						})
						this.getUserInfo()
					}else{
						this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.mydetail-body{
		
		min-height: 100vh;
			  background-color: rgba(245, 245, 245, 1);
	}
	.position-relateve{
		position: relative;
	}
	.right-xiugai-icon{
		position: absolute;
		right: 15px;
		top: 36px;
	}
	.tn-icon-right{
		display: inline-block;
	}
	.avatar-clas{
		
	}
	.ava-view{
		height: 160rpx;
		margin-bottom: 30rpx;
	}
	.height-100{
		height: 100rpx;
		height: 100rpx;
	}
	.width-150{
		width: 150rpx;
	}
	.infoitem{
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}
</style>